<template>
  <div class="container">
    <h3>{{topic.title}}</h3>
    <hr>
    <h4>{{topic.author}} / {{topic.time}}</h4>
    <p>{{topic.title}}</p>

    <hr>

    <div class="row border" v-for="(topic,index) in topics" :key="topic.id">
      <span class="col-2">{{index+1}}</span>
      <span class="col-8">{{topic.title}}</span>
      <span class="col-2">
        <router-link :to="{ name: 'topic' , params: { id : topic.id } }">详情</router-link>
      </span>
    </div>

  </div>
</template>

<script>
import x from "@/assets/topics";

export default {
  name: "Topic" ,
  // 务必记得在 路由记录 中添加 props: true ,然后才可以使用 this.id 来取代 this.$route.params.id
  props: [ 'id' ] ,
  data(){
    return { topic: null , topics: x.topicList }
  },
  created() {
    // this.topic = topicList.find( e => e.id == this.$route.params.id );
    this.topic = x.topicList.find( e => e.id == this.id );
    console.log( this.id , this.topic );
  },
  beforeRouteEnter( to , from ){
    console.log( 'Topic ( Route Enter ) : ' , `从${from.path}到${to.path}` );
    console.log( this );
  },
  beforeRouteUpdate( to , from ){
    console.log( 'Topic ( Route Update ) : ' , `从${from.path}到${to.path}` );
    this.topic = x.topicList.find( e => e.id == this.id );
  }
}
</script>

<style scoped>

</style>